<template>
  <div class="app">
    <h2>我是App</h2>
    <h4 v-text="n"></h4>
    <h4 v-big="n"></h4>
    <hr>
    <h4 v-text="name">有个美女：</h4>
    <h4 v-very-beauty="name">有个美女：</h4>
    <Child/>
  </div>
</template>

<script>
  import Child from './components/Child.vue'
  export default {
    name: 'App',
    components:{Child},
    data() {
      return {
        n:1,
        name:'美玲老师',
        x:999
      }
    },
    directives:{
      /* 
        1.big函数何时调用？—— 有人使用v-big指令时,且用几次调几次
        2.big函数中的this是谁？ —— 爱谁谁，反正不是vc
        3.big函数收到哪些参数？ —— ①指令所在元素、②本次绑定信息对象（信息对象中最有用的就是value）
        4.big函数是否需要写返回值 —— 不用
      */
      big(element,bindings){
        // console.log(element)
        // console.log(bindings.value)
        element.innerText = bindings.value * 10
      },
      /* beauty(element,{value}){
        element.innerText += value
        element.style.color = 'red'
        element.style.backgroundColor = 'green'
        element.style.boxShadow = '0 0 10px yellow'
        element.style.padding = '10px'
        element.style.borderRadius = '10px'
      } */
    }
  }
</script>

<style>
  .app {
    background-color: gray;
    border-radius: 10px;
    padding: 20px;
  }
</style>